<template>
	<view>
		<view class="expert-detail-top">
			<view class="expert-item-pic-contain">
				<image class="expert-item-pic" :src="expertDetail.headPortrait" mode=""></image>
			</view>
			<view class="expert-item-info">
				<view class="expert-item-info-self-top">
					<view class="expert-item-info-self">
						<text class="expert-item-info-self-name">{{expertDetail.userInfo.realName}}</text>

						<view class="vip_contain" v-if="expertDetail.topState==1">
							<view class="vip_sign">
								<image style="width: 24upx;height: 22upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/zuanshi.jpg" mode="scaleToFill"></image>
								<text class="expert-item-info-self-icon-text">特邀</text>
							</view>
						</view>
					</view>
				</view>
				<view class="expert-item-info-com oneline">
					{{expertDetail.jobTitle||''}}
				</view>
				<view class="expert-item-info-com oneline">
					{{expertDetail.topTitle||''}}
				</view>
			</view>
		</view>
		<view class="expert-detail-mine">

			<view class="expert-detail-mine-item">
				<text class="expert-detail-mine-item-title">工作单位：</text>
				<text class="expert-detail-mine-item-con">{{expertDetail.userInfo.workUnit?expertDetail.userInfo.workUnit:''}}</text>
			</view>
			<view class="expert-detail-mine-item">
				<text class="expert-detail-mine-item-title">研究领域：</text>
				<text class="expert-detail-mine-item-con">{{expertDetail.researchArea}}</text>
			</view>
			<view class="expert-detail-mine-item">
				<text class="expert-detail-mine-item-title">研究方向：</text>
				<text class="expert-detail-mine-item-tip" v-for="(item,index) in expertDetail.research" :key='index'>{{item}}</text>
			</view>
		</view>
		<view class="project-seprate"></view>
		<luBarTabNav :isShowTabbar="isShowTabbar" :tabList="tabList" :barFixed="barFixed" :iconShow="iconShow"
		 :transitionShow="transitionShow" :barHeight="barHeight" :barTop="barTop" :barId="barId" ref="barTabNav">
			<view id="item1" class="tabbody">
				<view class="project-detail-detail-contain">
					<view class="project-detail-detail-contain-title">
						专家简介
					</view>
					<view class="project-detail-detail-contain-detail">
						<view v-html="expertDetail.individual">
						</view>
					</view>
					<view class="sysNodata" v-if="expertDetail.individual==''||expertDetail.individual==null">
						<image class="detail" src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/chat/nodata.png" mode="widthFix"></image>
						<view class="sysNodataTitle">
							暂无简介
						</view>
					</view>
				</view>
				<view class="self-divider">

				</view>
			</view>
			<view id="item2" class="tabbody">
				<view class="project-detail-detail-contain" style="padding:30upx 0">
					<view class="project-detail-detail-contain-title" style="padding:0 30upx">
						成果推广
					</view>
					<view class="project-detail-detail-contain-detail" v-if="projectList.length!==0">
						<ProjectItem ref='ProjectItem' :projectList="projectList"></ProjectItem>
					</view>
				</view>
				<view class="sysNodata" v-if="projectList.length==0">
					<image  class="detail" src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/chat/nodata.png" mode="widthFix"></image>
					<view class="sysNodataTitle">
						暂无成果
					</view>
				</view>
				<view class="self-divider">

				</view>

			</view>
			<view id="item3" class="chat-title">
				<view class="paper-title">
					<view class="paper-text"><text>评价</text></view>
				</view>
				<view class="chat-warp">
					<view class="chat-warp-tab" v-if="count_data.all">
						<view class="item" :class="chat_tab==0?'active':''" @click="choiseTab('',0)">
							全部({{count_data.all?count_data.all:'0'}})
						</view>
						<view class="item" :class="chat_tab==1?'active':''" @click="choiseTab('回复很及时',1)">
							回复及时({{count_data.sum1?count_data.sum1:'0'}})
						</view>
						<view class="item" :class="chat_tab==2?'active':''" @click="choiseTab('建议很有帮助',2)">
							建议有帮助({{count_data.sum2?count_data.sum2:'0'}})
						</view>
						<view class="item" :class="chat_tab==3?'active':''" @click="choiseTab('讲解很清晰',3)">
							讲解很清晰({{count_data.sum3?count_data.sum3:'0'}})
						</view>
						<view class="item" :class="chat_tab==4?'active':''" @click="choiseTab('专业水平高',4)">
							专业水平高({{count_data.sum4?count_data.sum4:'0'}})
						</view>
						<view class="item" :class="chat_tab==5?'active':''" @click="choiseTab('服务态度好',5)">
							态度非常({{count_data.sum5?count_data.sum5:'0'}})
						</view>
					</view>
					<view class="chat-list">
						<view class="sysNodata" v-if="chat_list.length==0">
							<image  class="detail" src="https://www.innovationgloble.com/wxs/img/wx/kcxcx/img/chat/nodata.png" mode="widthFix"></image>
							<view class="sysNodataTitle">
								暂无评价
							</view>
						</view>

						<view class="item" v-for="item in chat_list" :key='item.id'>
							<image class="l" src="https://www.innovationgloble.com/wxs/img/wx/expert-head.png" mode="widthFix"></image>

							<view class="r">
								<view class="name_rate">
									<view class="name">
										{{item.userName}}
										<image v-if="item.vipLevel=='VIP0'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip0.png" mode="heightFix"></image>
										<image v-else-if="item.vipLevel=='VIP1'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip1.png"
										 mode="heightFix"></image>
										<image v-else-if="item.vipLevel=='VIP2'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip2.png"
										 mode="heightFix"></image>
										<image v-else-if="item.vipLevel=='VIP3'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip3.png"
										 mode="heightFix"></image>
										<image v-else-if="item.vipLevel=='VIP4'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip4.png"
										 mode="heightFix"></image>
										<image v-else-if="item.vipLevel=='VIP5'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip5.png"
										 mode="heightFix"></image>
										<image v-else-if="item.vipLevel=='VIP6'" class="vip_img" src="https://www.innovationgloble.com/wxs/img/wx/vip6.png"
										 mode="heightFix"></image>
										<image v-else-if="item.vipLevel=='星光会员'" src="https://www.innovationgloble.com/wxs/img/wx/vip.png" mode="heightFix"></image>
									</view>
									<uni-rate :value="item.score" size="18" disabled='true'></uni-rate>
								</view>
								<view class="notes">
									{{item.notes}}
								</view>
								<view class="keyWords">
									<text v-for="i in item.keyWords" :key='i'>#{{i}}</text>
								</view>
								<view class="createDate">
									{{item.createDate}}
								</view>
							</view>

						</view>
					</view>
					<view class="more" @click="moreChatPaper" v-if="!isChatLastPage">
						查看更多
					</view>
					<!-- <view class="chat-button">给专家写个评价吧</view> -->
				</view>
			</view>
			<view class="sysBottomShow" style="background: #f5f6f9;">
				我是有底线的
			</view>
			<view :style="{'height':bottomHeight}">

			</view>
			<view class="project-detail-option" :style="{'height':bottomHeight}">
				<view class="project-detail-option-contain">

					<view @click="collectProject" class="project-detail-option-sc">
						<view class="project-detail-option-top">
							<image class="project-detail-option-top" style="width: 40upx;" :src="isCollect?'https://www.innovationgloble.com/wxs/img/wx/fav_icon.png':'https://www.innovationgloble.com/wxs/img/wx/un_fav_icon.png'"
							 mode="heightFix"></image>
						</view>
						<view class="project-detail-option-text">
							{{isCollect?'已关注':'关注'}}
						</view>
					</view>

					<view class="project-detail-option-sc">
						<button open-type="share" @ShareAppMessage="onShareAppMessage(projectDetail.id) ">
							<view class="project-detail-option-text project-detail-option-top">
								<image style="width: 41upx ;" class="project-detail-option-top" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/p-share.jpg"
								 mode="heightFix"></image>
							</view>
							<view class="project-detail-option-text">
								分享

							</view>
						</button>
					</view>
					<view @click="toSendHeart" class="project-detail-option-sc">
						<view class="project-detail-option-top">
							<image class="project-detail-option-top" :src="'https://www.innovationgloble.com/wxs/img/wx/pro_send_heart.png'" mode="heightFix"></image>
						</view>
						<view class="project-detail-option-text">
							送心意
						</view>
					</view>

				</view>
				<view class="project-detail-option-btn">
					<view @click="togglePopup" class="project-detail-option-left-btn">
						我要咨询
					</view>
				</view>
			</view>
		</luBarTabNav>

		<uni-popup ref="showpopup" type="bottom" @change="change">
			<view class="expert-detail-pop">
				<view class="expert-detail-pop-title">
					<text>选择咨询方式</text>
					<image style="width: 30upx;height: 30upx;" @click="closePop" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/closeCon.png"
					 mode=""></image>

				</view>
				<view v-if="picTxtItem" @click="toPicText" class="expert-detail-pop-item">
					<view class="expert-detail-pop-item-pic1">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img-text.png" mode=""></image>
					</view>
					<view class="expert-detail-pop-item-con">
						<view class="expert-detail-pop-item-in">
							<view class="expert-detail-pop-item-in-title">
								图文咨询
							</view>
							<view class="expert-detail-pop-item-in-price">
								{{`¥${picTxtItem.price}元/次`}}
							</view>
							<view class="expert-detail-pop-item-in-detail">
								一次咨询的时效为48小时,在48小时内随时和咨
								询专家(专家对话上限为30次).
							</view>
						</view>
						<view class="expert-detail-pop-item-con-right">
							<text class="icon iconfont iconright1"></text>
						</view>
					</view>
				</view>

				<view v-if="phoneItem" @click="toAppointment" class="expert-detail-pop-item">
					<view class="expert-detail-pop-item-pic2">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/tel-phone.png" mode=""></image>
					</view>
					<view class="expert-detail-pop-item-con">
						<view class="expert-detail-pop-item-in">
							<view class="expert-detail-pop-item-in-title">
								电话咨询
							</view>
							<view class="expert-detail-pop-item-in-price">
								{{`¥${phoneItem.price}元起/次`}}
							</view>
							<view class="expert-detail-pop-item-in-detail">
								和专家约定时间电话交流，支持未来7天内的预
								约服务
							</view>
						</view>
						<view class="expert-detail-pop-item-con-right">
							<text class="icon iconfont iconright1"></text>
						</view>
					</view>
				</view>
				<view class="expert-detail-pop-item" @click="goChat">
					<view class="expert-detail-pop-item-pic3">
						<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/trust-fill.png" mode=""></image>
					</view>
					<view class="expert-detail-pop-item-con">
						<view class="expert-detail-pop-item-in">
							<view class="expert-detail-pop-item-in-title">
								洽谈人咨询
							</view>
							<view class="expert-detail-pop-item-in-price">
								免费咨询
							</view>
						</view>
						<view class="expert-detail-pop-item-con-right">
							<text class="icon iconfont iconright1"></text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import luBarTabNav from "@/components/lu-bar-tab-nav/lu-bar-tab-nav.vue";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import ProjectItem from '@/components/page-componnet/project-item.vue'
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		components: {
			luBarTabNav,
			uniPopup,
			ProjectItem,
			
		},
		data() {
			return {
				constUrl: this.$baseUrl,
				htmlp: '<p>hello world</p>',
				expertId: '',
				expertDetail: {},
				isShowTabbar: false,
				barFixed: true,
				barHeight: "44",
				barTop: 0,
				iconShow: true,
				projectList: [],
				barId: "0",
				isCollect: false,
				collectInfo: {},
				tabList: [{
					text: "简介",
					navTarget: "#item1",
					iconClass: "icon01",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "成果",
					navTarget: "#item2",
					iconClass: "icon02",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}, {
					text: "评价",
					navTarget: "#item3",
					iconClass: "icon03",
					iconImage: "",
					selectedIconClass: "",
					selectedIconImage: ""
				}],
				picTxtItem: null,
				phoneItem: null,
				bottomHeight: '110rpx',
				count_data: {}, //评价数量
				chat_tab: 0,
				chat_page: 1,
				chat_list: [],
				isChatLastPage: true,
				keyword: '',
			}
		},
		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			//获取//查看专家详情
			getExpertDetail(expertId) {
				this.$request.get({
					url: 'ExpertInfo/selectExperById',
					data: {
						expertId
					},
				}).then(res => {
					console.log("resExpert", res);
					this.expertDetail = res;
					uni.setNavigationBarTitle({
						title: res.userInfo.realName + '专家'
					});
					this.expertDetail.research = this.expertDetail.research.split(',')
					console.log(this.expertDetail.research)

					let prjDetail = this.expertDetail.individual;
					if (prjDetail) {
						let individual = prjDetail.replace(/height: ;width:/, '');
						individual = individual.replace(/height=/, '');
						individual = individual.replace(/width=/, '');
						individual = individual.replace(/src=\"/g, 'style="width:100%;object-fit:cover;" src="' + this.constUrl);
						this.expertDetail.individual = individual.replace(/style=\"/g, 'style="width:100%;object-fit:cover;word-break: break-all;word-wrap: break-word;');
					}
					
					//  获取咨询 价格 等信息
					this.getExpertFeeInfo(this.expertDetail.linkUserId);
					this.getExpertPro(this.expertDetail.linkUserId);
					this.getattentionInfo(this.expertDetail.linkUserId);
					//获取评价数量
					this.countAll()
					// 获取评价列表
					this.selectAll()

				});
			},
			// 图文咨询  电话咨询费
			getExpertFeeInfo(linkUserId) {
				this.$request.get({
					url: 'mallInfo/selectExpert',
					data: {
						"id": linkUserId
					},
				}).then(priceItems => {
					console.log('showByExpertId##', priceItems);
					if (priceItems && priceItems.length !== 0) {
						//获取到 图文咨询
						const picTxtItems = priceItems.filter(item => parseInt(item.typeId) === 2);
						if (picTxtItems.length !== 0) {
							if (parseFloat(picTxtItems[0].isEnable) === 1) {
								this.picTxtItem = picTxtItems[0];
							}
						}
						const phoneItems = priceItems.filter(item => parseInt(item.typeId) === 3);
						if (phoneItems.length !== 0) {
							if (parseFloat(phoneItems[0].isEnable) === 1) {
								this.phoneItem = phoneItems[0];
							}
						}
					}
				}, res => {});
			},
			//获取专家项目成果
			getExpertPro(linkUserId) {
				this.$request.post({
					url: 'projectInfo/pageQueryList.json',
					data: {
						createId: linkUserId
					},
				}).then(res => {
					this.projectList = res.data;
				});
			},
			clickShare(id) {
				this.onShareAppMessage(id)
			},
			onShareAppMessage(id) {
				return {
					title: this.expertDetail.userInfo.realName,
					path: '/pages/expert-detail/expert-detail?scene=' + this.expertDetail.expertId, //页面路径及参数
					imageUrl: this.expertDetail.headPortrait, //图片链接，必须是网络连接，后面拼接时间戳防止本地缓存
				}
			},
			toAppointment() {
				// this.closePop();
				// uni.navigateTo({
				// 	url: `/pages/appointment/appointment?expertId=${this.expertId}&linkUserId=${this.expertDetail.linkUserId}`
				// });
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				uni.navigateTo({
					url: `/pagesA/tel-consult/tel-consult?expertId=${this.expertId}&linkUserId=${this.expertDetail.linkUserId}&realName=${this.expertDetail.fullName === 1 ? this.expertDetail.userInfo.realName.slice(0, 1) + '专家' : this.expertDetail.userInfo.realName}&headPortrait=${this.expertDetail.headPortrait}`
				});
				this.closePop();
			},
			goChat() {
				let openid = uni.getStorageSync('openid');
				if (!openid) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				if (!this.userInfo || !this.userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				this.closePop();
				if (this.expertDetail.linkUserId == this.userInfo.userId) {
					uni.showToast({
						title: '不能咨询自己',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: `/pagesA/chat-contactlist/chat?userId=${this.expertDetail.talkUserId || 85}&id=${this.expertDetail.expertId}&img=${this.expertDetail.headPortrait}&type=talent&name=${this.expertDetail.userInfo.realName}`
				})
			},
			toPicText() {
				this.closePop();
				uni.navigateTo({
					url: `/pagesA/text-result/text-result?scene=${this.expertDetail.expertId}`
				});
			},
			//底部弹出
			togglePopup(type, open) {
				const userInfo = uni.getStorageSync('userInfo');
				if (!userInfo || !userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				console.log(this.expertDetail)
				if (this.expertDetail.linkUserId == userInfo.userId) {
					uni.showToast({
						title: '不能咨询自己',
						icon: 'none'
					})
					return
				}
				this.$refs.showpopup.open()
			},
			closePop() {
				this.$nextTick(() => {
					this.$refs.showpopup.close()
				})
			},
			change(e) {},
			toSendHeart() {
				if (!this.userInfo || !this.userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				uni.navigateTo({
					url: `/pagesA/send-heart/send-heart?headPortrait=${this.expertDetail.headPortrait}&linkUserId=${this.expertDetail.linkUserId}&&name=${this.expertDetail.userInfo.realName}`
				})
				this.closePop();
			},
			//查看是否关注该专家
			getattentionInfo() {
				if (!this.expertDetail.linkUserId) {
					return
				}
				if (!this.hasLogin) {
					this.isCollect = false;
					return false
				}
				this.$request.get({
					url: 'userFollow/queryOne',
					data: {
						mainId: this.expertDetail.linkUserId,
						type: 1
					},
				}).then(res => {
					console.log("是否收藏", res);
					if (res) {
						this.isCollect = true;
						this.collectInfo = res;
					} else {
						this.isCollect = false
					}
				});
			},
			//收藏取消事件
			collectProject() {
				let userInfo = uni.getStorageSync('userInfo');
				if (!this.userInfo || !this.userInfo.userId) {
					uni.navigateTo({
						url: '/pagesA/login/login'
					});
					return false;
				}
				if (JSON.stringify(userInfo) == "{}") {
					return false
				}
				//如果已收藏，取消收藏
				if (this.isCollect) {
					console.log('进入了取消模块');
					this.$request.get({
						url: 'userFollow/delete',
						data: {
							id: this.collectInfo.id
						},
					}).then(res => {
						this.isCollect = false;
						this.collectInfo = {};
					});
				} else {
					this.$request.get({
						url: 'userFollow/add',
						data: {
							mainId: this.expertDetail.linkUserId,
							type: 1
						},
					}).then(res => {
						console.log(res);
						this.isCollect = true;
						this.collectInfo = res;
					});
				}
			},
			//评价数量
			countAll() {
				let that = this
				this.$request.get({
					url: 'orderAppraise/countAll',
					data: {
						mainId: this.expertDetail.linkUserId,
						mallType: 2
					}
				}).then(res => {
					that.count_data = res
				})
			},
			// 评价列表
			selectAll() {
				let that = this
				this.$request.get({
					url: 'orderAppraise/selectAll',
					data: {
						mainId: this.expertDetail.linkUserId,
						mallType: 2,
						keyWords: this.keyword,
						pageNum: this.chat_page,
						pageSize: '3'
					}
				}).then(res => {
					for (let i of res.list) {
						i.keyWords = i.keyWords.split(',')
					}
					that.chat_list = [...that.chat_list, ...res.list]
					this.isChatLastPage = res.isLastPage;
				})
			},
			moreChatPaper() {
				this.chat_page++;
				this.selectAll()
			},
			choiseTab(value, id) {
				this.chat_tab = id;
				this.keyword = value;
				this.chat_page = 1;
				this.chat_list = [];
				this.selectAll()
			}
		},
		onLoad(option) {
			wx.showShareMenu({
					withShareTicket:true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus:["shareAppMessage","shareTimeline"]
			})
			this.getExpertDetail(option.scene);
			this.expertId = option.scene;
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.model);
					if (res.model.indexOf('iPhone X') != -1 || res.model.indexOf('iPhone 11') != -1) { //XS,XR,XS MAX均可以适配,因为indexOf()会将包含'iPhone X'的字段都查出来
						that.bottomHeight = '185rpx'
					} else {
						that.bottomHeight = '110rpx'
					}
				}
			});
		},
		onShow() {
			this.getattentionInfo();
		},
		onHide() {
			if(this.$refs.ProjectItem){
				this.$refs.ProjectItem.resetOpcity()
			}
			
		},
		onPageScroll: function(e) {
			if (e.scrollTop > 400) {
				this.isShowTabbar = true
			}
			if (e.scrollTop < 400) {
				this.isShowTabbar = false
			}
			this.$refs.barTabNav._selectedTab(e.scrollTop);
		},
	}
</script>

<style scoped lang="less">
	.project-detail-detail-contain-detail * {
		word-break: break-all;
	}
	.expert-detail-top {
		width: 100%;
		// height: 264upx;
		padding: 50upx 35upx;
		background-size: 100% 100%;
		background-image: url("https://www.innovationgloble.com/wxs/img/wx/pro_top_bg.png");
		display: flex;
		align-items: center;
	}

	.expert-item {
		display: flex;
		margin: 30upx 30upx 24upx 0upx;
	}

	.expert-item-pic-contain {
		/* padding: 6upx; */
		width: 160upx;
		height: 160upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background-color: #FFFFFF;
		margin-right: 31upx;
	}

	.expert-item-pic {
		width: 158upx;
		height: 158upx;
		border-radius: 50%;
		/* border: 1px solid #007AFF; */
		/* margin-right: 42upx;
		margin-left: 53upx; */
		flex-shrink: 0;
	}

	.expert-item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.expert-item-info-self {
		display: flex;
		// align-items: center;
	}

	.expert-item-info-self-name {
		font-size: 40upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #222;
		margin-right: 16upx;
		line-height: 50upx;

		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; //向显示多少行就给多大值
		-webkit-box-orient: vertical;
	}

	.expert-item-info-self-head {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
		margin-right: 6upx;
	}

	.vip_contain {
		margin-top: 8upx;
		text-align: right;
		height: 37upx;
		line-height: 37upx;

		.vip_sign {
			width: 103upx;
			height: 37upx;
			line-height: 37upx;
			background: rgba(255, 237, 187, 1);
			border-radius: 18upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 18upx;
			margin-left: 4upx;
		}
	}

	.self-divider {
		width: 100%;
		height: 16upx;
		background: rgba(245, 246, 249, 1);
	}

	.expert-item-info-self-icon {
		background-color: #FFEDBB;
		border-radius: 17upx;
		font-size: 19upx;
		/* color: #F7B500; */
		width: 80upx;
		/* display: flex; */
		height: 26upx;
		/* padding: 6upx 10upx; */
		/* align-items: center; */
	}

	.expert-item-info-self-icon>.icon {
		vertical-align: middle;
	}

	.expert-item-info-self-icon-text {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		margin-left: 6upx;
		color: rgba(182, 137, 14, 1);
	}

	.expert-item-info-com {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #595959;
	}

	.expert-item-info-research {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		width: 502upx;
		color: rgba(160, 160, 160, 1);
	}

	.oneline {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.project-seprate {
		width: 100%;
		height: 12upx;
		background: rgba(245, 245, 245, 1);
	}

	.project-detail-detail-contain {
		padding: 30upx;
		background-color: #FFFFFF;
	}

	.expert-detail-top-bottom {
		display: flex;
		margin: 0 56upx;
		justify-content: space-between;
		align-items: center;
	}

	.expert-detail-top-bottom-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.expert-detail-vertical-border {
		width: 1upx;
		height: 47upx;
		border-left: 2upx solid #C2C2C2;
	}

	.expert-detail-top-bottom-item text {
		line-height: 1;
	}

	.expert-detail-top-bottom-item>text {
		margin-bottom: 4upx;
	}

	.expert-item-info-self-top {
		display: flex;
		width: 100%;
		justify-content: space-between;
		// align-items: center;
	}

	.expert-item-info-self-heart {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(208, 66, 66, 1);
		width: 120upx;
		height: 42upx;
		border: 1upx solid #EA5C5C;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 4upx;
	}

	.expert-item-info-self-heart .icon {
		vertical-align: bottom;
	}

	.expert-detail-top-bottom-item-font {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
	}

	.expert-detail-mine {
		padding: 38upx 30upx;
	}

	.expert-detail-mine-title {
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.expert-detail-mine-item-title {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A9A9A9;
	}

	.expert-detail-mine-item-con {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.project-seprate {
		width: 100%;
		height: 12upx;
		background: rgba(245, 245, 245, 1);
	}

	.project-detail-option {
		/* padding-top: 187upx; */
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.05);
		background-color: #FFFFFF;
		/* height: 110upx; */
		position: fixed;
		display: flex;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 20upx;
	}

	.project-detail-option-contain {
		flex: 1;
		margin-right: 20upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 110upx;
	}

	.project-detail-option-sc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		/* padding: 10upx ; */
		height: 82upx;
		width: 88upx;
	}

	.project-detail-option-sc button {
		border: none;
		background-color: #FFFFFF;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 0;
		width: 88upx;
	}

	.project-detail-option-sc button::after {
		border: none;
	}

	.project-detail-option-top {
		height: 36upx;
		width: 36upx;
		/* border: 1px solid #007AFF; */
	}

	.project-detail-option-text {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #5F5F5F;
		line-height: normal;
	}

	.project-detail-option-btn {
		width: 444upx;
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		height: 110upx;
	}

	.project-detail-option-left-btn {
		width: 386upx;
		height: 82upx;
		background: linear-gradient(90deg, rgba(114, 170, 255, 1) 0%, rgba(42, 125, 250, 1) 100%);
		border-radius: 12upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32upx;
	}

	.project-detail-option-right-btn {
		width: 50%;
		background: rgba(42, 125, 250, 1);
		border-radius: 0upx 100upx 100upx 0upx;
		line-height: 80upx;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
	}

	.project-detail-comment-seen-more {
		margin: 0upx 30upx;
		text-align: center;
		line-height: 88upx;
		height: 88upx;
		background: rgba(248, 248, 248, 1);
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(42, 125, 250, 1);
		margin-bottom: 30upx;
	}


	.project-detail-option-text button {
		font-size: inherit;
		display: inline;
		padding: unset;
		line-height: inherit;
		background-color: #FFFFFF;
		color: #5F5F5F;
	}

	// .project-detail-option-text button image{
	// 	position: absolute;
	// 	top: 6upx;
	// 	left: 0;
	// }

	.project-detail-option-text button::after {
		border: none;
	}

	.project-detail-detail-contain-title {
		font-size: 30upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #333;
	}

	.popup-content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		background-color: #fff;
		padding: 15px;
		font-size: 14px;
	}

	.expert-detail-pop {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 30upx 30upx 0upx 0upx;
		padding: 60upx 30upx 160upx;
		margin-bottom: -100upx;
	}

	.expert-detail-pop-title {
		display: flex;
		justify-content: space-between;
		font-size: 42upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-bottom: 11upx
	}

	.expert-detail-pop-item {
		display: flex;
		margin-top: 57upx;
	}

	.expert-detail-pop-item-con {
		/* width: 455upx; */
		display: flex;
		align-items: center;
	}

	.expert-detail-pop-item-pic {
		width: 113upx;
		height: 113upx;
		border-radius: 50%;
		border: 1upx solid #007AFF;
	}

	.expert-detail-pop-item-in {
		margin-left: 34upx;
		margin-right: 53upx;
		width: 455upx;
	}

	.expert-detail-pop-item-in-title {
		font-size: 34upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}

	.expert-detail-pop-item-in-price {
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: rgba(222, 90, 2, 1);
	}

	.expert-detail-pop-item-in-detail {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(174, 174, 174, 1);
	}

	.expert-detail-pop-item-pic1 {
		width: 113upx;
		height: 113upx;
		border-radius: 50%;
		background: radial-gradient(rgba(42, 125, 250, 1), rgba(131, 180, 253, 1));
		box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.expert-detail-pop-item-pic2 {
		width: 113upx;
		height: 113upx;
		border-radius: 50%;
		background: radial-gradient(rgba(255, 164, 80, 1), rgba(255, 200, 149, 1));
		box-shadow: 0px 0px 2upx 0px rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}



	.expert-detail-pop-item-pic3 {
		width: 113upx;
		height: 113upx;
		border-radius: 50%;
		background: radial-gradient(rgba(13, 194, 181, 1), rgba(89, 229, 222, 1));
		box-shadow: 0px 0px 2upx 0px rgba(255, 255, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.expert-detail-pop-item-pic2 image {
		width: 65upx;
		height: 56upx;
	}

	.expert-detail-pop-item-pic1 image {
		width: 65upx;
		height: 56upx;
	}

	.expert-detail-pop-item-pic3 image {
		width: 65upx;
		height: 56upx;
	}

	.expert-detail-mine-item-tip {
		height: 36upx;
		background: rgba(242, 247, 255, 1);
		border: 1upx solid rgba(233, 241, 255, 1);
		color: #547AAC;
		font-size: 24upx;
		line-height: 36upx;
		margin-right: 14upx;
		padding: 0 12upx;
	}

	.chat-title {
		background-color: #FFFFFF;
		margin-bottom: 14upx;
		// min-height: 320px;

		.paper-title {
			height: 88upx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding-left: 12px;
			// border-bottom: 0.5upx solid #EBEBEB;
			position: relative;

			.paper-text {
				width: 64upx;
				height: 50upx;
				font-size: 30upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(68, 68, 68, 1);
				position: relative;
				display: inline-block;
				line-height: 50upx;

				text {
					position: absolute;
				}

			}

			.paper-num {
				font-size: 24upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #a3a3a3;
				position: absolute;
				top: 16upx;
				left: 110upx;
			}
		}

		.chat-warp {
			padding: 0 0 20upx 0;

			.chat-warp-tab {
				display: flex;
				flex-wrap: wrap;
				padding: 20upx 40upx 0 40upx;

				.item {
					line-height: 56upx;
					font-size: 26upx;
					text-align: center;
					padding: 0 22upx;
					border-radius: 30upx;
					border: 2upx solid rgba(235, 235, 235, 1);

					margin-right: 16upx;
					margin-bottom: 18upx;
				}

				.item.active {
					background: rgba(243, 247, 255, 1);
					color: #196DEC;
					border: 2upx solid rgba(140, 182, 245, 1);
				}

			}

			.chat-list {
				padding: 0 32upx;
				margin-bottom: 24upx;

				.no-chat-data {
					font-size: 26upx;
					color: #A3A3A3;
					text-align: center;
					padding: 100upx 0 50upx 0;
					line-height: normal;

					image {
						width: 142upx;
						margin: 0 auto;
						display: block;
					}


				}

				.item {
					border-bottom: 0.5upx solid #EBEBEB;
					display: flex;

					.l {
						width: 52upx;
						border-radius: 52upx;
						overflow: hidden;
						margin-top: 20upx;
					}

					.r {

						flex: 1;
						padding-left: 20upx;

						view {
							line-height: normal;
						}

						.name_rate {
							font-size: 28upx;
							margin-top: 28upx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.name {
								display: flex;
								align-items: center;

								image {
									height: 30upx;
									width: 57upx;
									margin-left: 14upx;
								}
							}
						}

						.notes {
							font-size: 28upx;
							color: #444;
							margin-top: 16upx;
							width: 100%;
							white-space: pre-wrap;
							word-break: break-all;
						}

						.keyWords {
							color: #486B9D;
							font-size: 24upx;
							margin: 28upx 0;

							text {
								margin-right: 20upx;
							}
						}

						.createDate {
							color: #A3A3A3;
							font-size: 24upx;
							margin-bottom: 24upx;
						}
					}
				}

				.item:nth-last-child(1) {
					border-bottom: none;
				}
			}

			.chat-button {

				width: 284upx;
				height: 64upx;
				line-height: 64upx;
				border-radius: 32upx;
				border: 2upx solid rgba(221, 221, 221, 1);
				margin: 44upx auto 34upx;
				text-align: center;
				font-size: 28upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(107, 107, 107, 1);
			}
		}

		.more {
			width: 686upx;
			height: 84upx;
			background: rgba(243, 247, 251, 1);
			margin: 0 auto;
			text-align: center;
			line-height: 84upx;
			font-size: 28upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(72, 107, 157, 1);

		}
	}
</style>
